<template>
  <view
    @tap="handleItemClick"
    class="bg-white rounded-[28rpx] p-[32rpx] shadow-md relative flex flex-col hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
  >
    <!-- 头部信息 -->
    <view class="flex justify-start items-start mb-[18rpx]">
      <view class="flex-1 w-0 mr-[16rpx]">
        <view class="w-full text-[32rpx] font-bold text-[#222] truncate mb-[8rpx]">{{
          item.title
        }}</view>
        <view class="w-full text-[26rpx] text-[#666] flex items-center">
          <IconFont name="location" size="18" class="mr-[6rpx]" />
          {{ item.full_address }}
        </view>
      </view>
      <view
        class="text-[22rpx] text-[#F44336] px-[20rpx] py-[8rpx] rounded-[16rpx] font-medium shrink-0"
        :class="item.statusClass"
        >{{ item.status == 5 ? '已取消' : '' }}
        </view
      >
    </view>

    <!-- 核心信息区 -->
    <!-- <view class="grid grid-cols-2 gap-[16rpx] mb-[20rpx]">
      <view class="flex items-center text-[26rpx]">
        <IconFont name="distance" size="24" class="text-[#9C27B0] mr-[8rpx]" />
        <text class="text-[#666]">{{ item.distance }}</text>
      </view>
      <view class="flex items-center text-[26rpx]">
        <IconFont name="reward" size="24" class="text-[#FF9800] mr-[8rpx]" />
        <text class="text-[#FF9800] font-medium">{{ item.reward }}</text>
      </view>
    </view> -->

    <!-- 签到信息区 -->
    <view 
      class="my-[10rpx] p-[18rpx] bg-gradient-to-r from-[#e3f2fd] to-[#e0f7fa]" 
      :class="item.hasSigned ? 'rounded-[12rpx] border-l-[6rpx] border-l-[#4caf50]' : 'rounded-[12rpx] border-l-[6rpx] border-l-[#1976d2]'"
    >
      <view class="text-[24rpx] font-bold mb-[10rpx]">
        {{ item.hasSigned ? '已完成签到' : '签到信息' }}
      </view>
      <view class="grid grid-cols-1 gap-[8rpx] text-[22rpx]">
        <view class="flex justify-between">
          <span class="text-[#666]">签到时间：</span>
          <span class="font-medium">{{ item.check_time }} - {{ item.deadline }}</span>
        </view>
        <view class="flex justify-between" v-if="!item.hasSigned">
          <span class="text-[#666]">签到范围：</span>
          <span class="font-medium text-[#1976d2]">{{ item.check_range }}米</span>
        </view>
        <view class="flex justify-between" v-if="item.hasSigned">
          <span class="text-[#666]">签到状态：</span>
          <span class="font-medium text-[#4caf50]">已成功签到</span>
        </view>
      </view>
    </view>

    <!-- 元信息 -->
    <view class="flex justify-between text-[22rpx] mb-[10rpx]">
      <view class="text-[#999]">
        <view>
          <!-- <IconFont name="enroll" size="20" class="inline-block mr-1" /> -->
          报名时间：{{ item.create_time }}
        </view>
      </view>
      <view class="text-right" v-if="!item.hasSigned">
        <view class="text-[22rpx] text-[#F44336] font-medium">
          <!-- <IconFont name="clock" size="20" class="inline-block mr-1" />
          请在规定时间内签到 -->
          {{ item.task_amount }}元
        </view>
      </view>
    </view>

    <!-- 标签 -->
    <view class="flex flex-wrap gap-x-[10rpx] gap-y-[10rpx] mb-[10rpx]">
      <view
        v-for="(tag, tIndex) in item.tags"
        :key="tIndex"
        class="text-[20rpx] px-[16rpx] py-[6rpx] bg-[#fff3e0] rounded-[10rpx] text-[#e65100] font-medium"
      >
        {{ tag }}
      </view>
    </view>

    <!-- 底部操作区 -->
    <view v-if="item.status != 5"
      class="flex items-center justify-end mt-[10rpx] pt-[10rpx] border-t border-[#f5f7fa] gap-[12rpx]"
    >
      <nut-button
        size="small"
        type="info"
        @click.stop="handleViewDetails"
      >
        查看详情
      </nut-button>
      
      <!-- <nut-button
        size="small"
        type="primary"
        class="!ml-2"
        @click.stop="handleCheckIn"
        :disabled="item.hasSigned"
      >
        {{ item.hasSigned ? '已签到' : '立即签到' }}
      </nut-button> -->
      
      <!-- <nut-button
        
        size="small"
        type="warning"
        class="!ml-2"
        @click.stop="handleCancel"
        :disabled="item.hasSigned"
      >
        取消报名
      </nut-button> -->

      <nut-button
        v-if="item.status == 5"
        disabled
        size="small"
      >
        已取消
      </nut-button>
      <nut-button
        v-else
        size="small"
        type="warning"
        @click.stop="handleCancel"
        :disabled="item.hasSigned"
      >
        取消报名
      </nut-button>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { Button as nutButton } from "@nutui/nutui-taro";
import { post } from "@/utils/request";

// 接收父组件传入的单个签到任务项数据
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  }
});

// 向父组件传递事件
const emit = defineEmits(["click", "viewDetails", "checkIn", "cancel", "reload"]);

// 处理整个项点击
const handleItemClick = () => {
  emit("click", props.item);
};

// 处理查看详情
const handleViewDetails = () => {
  emit("viewDetails", props.item);
};

// 处理签到
const handleCheckIn = () => {
  // 模拟位置检测
  Taro.showLoading({ title: '正在验证位置...' });
  
  setTimeout(() => {
    Taro.hideLoading();
    // 实际应用中应该调用位置接口验证是否在签到范围内
    Taro.showModal({
      title: '签到确认',
      content: `确认在${item.location}进行签到吗？`,
      success: (res) => {
        if (res.confirm) {
          emit("checkIn", props.item);
          Taro.showToast({
            title: '签到成功',
            icon: 'success',
            duration: 2000
          });
        }
      }
    });
  }, 1000);
};

// 处理取消报名
const handleCancel = () => {
  Taro.showModal({
    title: '确认取消',
    content: '确定要取消该签到任务的报名吗？',
    success: (res) => {
      if (res.confirm) {
      post("/check/updateSignUp", {
        id: props.item.tmId,
        status: 5
      }).then(res=>{
        if(res.code==0){
          Taro.showToast({
            title: '取消成功',
            icon: 'success'
          })
          emit("reload");
        }else{
          Taro.showToast({
            title: res.data,
            icon: 'error'
          })
        }

      })
        //emit("giveUp", props.item);
      }
    }
  });
};
</script>
